import { useFindTopCategory } from "@/apis/category";
import XtxBread from "@/components/library/xtxBread";
import XtxBreadItem from "@/components/library/xtxBreadItem";
import { useMemo } from "react";
import { useSelector } from "react-redux";
import { useParams } from "react-router-dom";

function SubBread() {
  // 拿取二级分类下的所有分类
  const topCategory = useSelector((store: any) => store.category.list);
  const { id } = useParams();

  const subCategory = useMemo(() => {
    let obj: {
      sub: any;
      top: any;
    } = {
      sub: {},
      top: {},
    };
    topCategory.forEach((top: any) => {
      top.children &&
        top.children.forEach((sub: any) => {
          if (sub.id === id) {
            // 设置二级类目
            obj.sub = { id: sub.id, name: sub.name };
            // 设置一级类目
            obj.top = { id: top.id, name: top.name };
          }
        });
    });
    return obj;
  }, [topCategory, id]);
  return (
    <>
      <XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
        {subCategory.top.id && (
          <XtxBreadItem to={`/category/${subCategory.top.id}`}>
            {subCategory.top.name}
          </XtxBreadItem>
        )}
        {subCategory.sub.id && (
          <XtxBreadItem>{subCategory.sub.name}</XtxBreadItem>
        )}
      </XtxBread>
    </>
  );
}

export default SubBread;
